<!--
 * @Description: vue-echarts 组件封装
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2023-03-29 16:05:11
 * @LastEditTime: 2023-03-29 17:21:19
-->
<template>
  <v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
</template>

<script lang="ts">
import { use, ComposeOption } from "echarts/core";
// 按需引入组件
// 引入图表，图表后缀都为 Chart
// 系列类型的定义后缀都为 SeriesOption
import {
  // 柱图
  BarChart,
  BarSeriesOption,
  // 折线图
  LineChart,
  LineSeriesOption,
  // 饼图、环图
  PieChart,
  PieSeriesOption,
  // 散点图
  ScatterChart,
  ScatterSeriesOption,
} from "echarts/charts";

// 引入组件 Component
import {
  // 标题
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  // 引入提示框
  TooltipComponent,
  TooltipComponentOption,
  // 直角坐标系
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  // 图例
  LegendComponent,
  LegendComponentOption
} from "echarts/components";

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | PieSeriesOption
  | ScatterSeriesOption
  | LegendComponentOption
>;

// 类型使用
// import Chart, { ECOption } from './Chart.vue';
// const options: ECOption = reactive({})
/** 
 * 组件使用：
  `<div style="width:500px;height:300px;">
    <chart :option="options" :loading="pieLoading" />
  </div>`
*/

// 注册必须的组件
use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

export default {
  name: 'Chart',
}
</script>

<script lang="ts" setup>
import { provide, PropType } from 'vue'
import VChart, { THEME_KEY } from 'vue-echarts'

const props = defineProps({
  theme: {
    type: String as PropType<'light' | 'dark'>,
    default: 'dark',
  },
  loading: {
    type: Boolean,
    default: false,
  },
  option: {
    type: Object as PropType<ECOption>,
    default: () => ({}),
  },
})

// 主题配置
provide(THEME_KEY, props.theme)
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
